<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    /* padding版本 */
    /* #div1{width: 350px;height: 350px;border: 1px black dashed; padding: 27px;}
    #div2{border: 5px #d7effe solid;padding: 20px;}
    #div3{background-color: #ffa0df;padding: 40px;}
    #div4{border: 1px white dashed;padding: 3px;}
    #div5{border: 1px white dashed;padding:49px}
    #div6{height: 100px;width: 100px;background-color: #96ff38;border: 5px #fcff00 solid;}  */


    /* Margin版本 */

    #div1{width: 350px;height: 350px;border: 1px black dashed;}
    #div2{border: 5px #d7effe solid;margin: 22px;}
    #div3{background-color: #ffa0df;margin: 19px;border: 1px transparent solid;}
    #div4{border: 1px white dashed;margin: 39px;}
    #div5{border: 1px white dashed;margin:2px}
    #div6{height: 100px;width: 100px;background-color: #96ff38;border: 5px #fcff00 solid;margin:35px}
    


  </style>


</head>
<body>
  
  <div id="div1">
    <div id="div2">
      <div id="div3">
        <div id="div4">
          <div id="div5">
            <div id="div6"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>